<template>
  <j-page ref="page" title="账单">
      <view class="bills">
        <view class="bill_item" v-for="a in [1,2,3,4,5,6,7,8,9]" :key="a">
          <view>账单编号：2021010414293545374927</view>
          <view class="bill_item_unmBox">
            <text class="bill_item_unmBox_type">+</text>
            <text class="bill_item_unmBox_num">10.00</text>
            <text class="bill_item_unmBox_mark">(￥)</text>
            <text>取消</text>
          </view>
          <view>账单说明：充值</view>
          <view>账单日期：2021-01-04 14:29:35</view>
        </view>
      </view>
  </j-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
.bills{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .bill_item{
    color: #606266;
    width: 90%;
    padding: 40rpx 40rpx 60rpx;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: #fff;

    &_unmBox{
      margin: 20rpx 0;

      &_type{
        font-size: 70rpx;
      }

      &_num{
        font-size: 70rpx;
        margin-left: 20rpx;
      }

      &_mark{
        font-size: 20rpx;
        margin-right: 60rpx;
      }
    }
  }
}
</style>
